    <!-- <template>
    <div id="main" ref="chart" style="width: 1200px; height: 1000px"></div>
</template>
    
    <script>
import * as echarts from "echarts";

export default {
    mounted() {
        const chartDom = this.$refs.chart;
        const myChart = echarts.init(chartDom);
        const option = {
            title: {
                text: "",
            },
            tooltip: {},
            animationDurationUpdate: 1500,
            animationEasingUpdate: "quinticInOut",
            series: [
                {
                    type: "graph",
                    layout: "none",
                    symbolSize: 50,
                    roam: true,
                    label: {
                        show: true,
                    },
                    edgeSymbol: ["circle", "arrow"],
                    edgeSymbolSize: [4, 10],
                    edgeLabel: {
                        fontSize: 18,
                    },
                    data: [
                        {
                            name: "Node 1",
                            x: 300,
                            y: 200,
                        },
                        {
                            name: "Node 2",
                            x: 700,
                            y: 200,
                        },
                        {
                            name: "Node 3",
                            x: 300,
                            y: 500,
                        },
                        {
                            name: "Node 4",
                            x: 700,
                            y: 500,
                        },
                        {
                            name: "Node 5",
                            x: 500,
                            y: 800,
                        },
                        {
                            name: "Node 6",
                            x: 700,
                            y: 800,
                        },
                    ],
                    links: [
                        {
                            source: 0,
                            target: 1,
                            symbolSize: [5, 20],
                            label: {
                                show: true,
                            },
                            lineStyle: {
                                width: 5,
                                curveness: 0.2,
                            },
                        },
                        {
                            source: "Node 2",
                            target: "Node 1",
                            label: {
                                show: true,
                            },
                            lineStyle: {
                                curveness: 0.2,
                            },
                        },
                        {
                            source: "Node 1",
                            target: "Node 3",
                        },
                        {
                            source: "Node 2",
                            target: "Node 3",
                        },
                        {
                            source: "Node 2",
                            target: "Node 4",
                        },
                        {
                            source: "Node 1",
                            target: "Node 4",
                        },
                        {
                            source: "Node 3",
                            target: "Node 5",
                        },
                        {
                            source: "Node 3",
                            target: "Node 6",
                        },
                        {
                            source: "Node 5",
                            target: "Node 6",
                        },
                        {
                            source: "Node 4",
                            target: "Node 6",
                            symbolSize: [1, 20],
                            label: {
                                show: true,
                            },
                            lineStyle: {
                                width: 5,
                                curveness: 0.2,
                            },
                        },
                    ],
                    lineStyle: {
                        opacity: 0.9,
                        width: 2,
                        curveness: 0,
                    },
                },
            ],
        };

        option && myChart.setOption(option);
    },
};
</script> -->
 <template>
    <div id="main" style="width: 1200px; height: 800px"></div>
</template>
  
<script>
import data from "./data.json";
import * as echarts from "echarts";
// import axios from "axios";

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById("main");
      const myChart = echarts.init(chartDom);

      myChart.showLoading();
      const graph = data; 
      console.log(graph,'graph');

      graph.nodes.forEach(function (node) {
        node.label = {
          show: node.symbolSize > 30,
        };
      });

      const option = {
        title: {
          text: "Les Miserables",
          subtext: "Default layout",
          top: "bottom",
          left: "right",
        },
        tooltip: {},
        legend: [
          {
            data: graph.categories.map(function (a) {
                console.log(a,'a');
              return a.name;
              
            }),
          },
        ],
        animationDuration: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            name: "Les Miserables",
            type: "graph",
            layout: "none",
            data: graph.nodes,
            links: graph.links,
            categories: graph.categories,
            roam: true,
            label: {
              position: "right",
              formatter: "{b}",
            },
            lineStyle: {
              color: "source",
              curveness: 0.3,
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10,
              },
            },
          },
        ],
      };

      myChart.setOption(option);
      myChart.hideLoading();
    },
  },
};
</script>
